<template>
  <div class="box myBox">
    <van-nav-bar
      title="我的"
      left-arrow
      @click-left="$router.back()"
      @click-right="$router.push('/setting')"
    />
    <van-form @submit="onSubmit">
      <van-field
        v-model="nickName"
        name="nickName"
        label="昵称"
        placeholder="昵称"
      />
      <van-field
        v-model="tel"
        name="tel"
        label="手机号"
        placeholder="手机号"
      />
      <van-field
        v-model="email"
        name="email"
        label="邮箱"
        placeholder="邮箱"
      />
      <van-cell-group>
        <van-cell title="请选择生日" is-link @click="show = true" :value="d" />
      </van-cell-group>
      <van-checkbox-group v-model="result" direction="horizontal">
        <van-checkbox name="篮球">篮球</van-checkbox>
        <van-checkbox name="足球">足球</van-checkbox>
      </van-checkbox-group>
      <div style="margin: 16px;">
        <van-radio-group v-model="sex">
          <van-radio name="1">男</van-radio>
          <van-radio name="0">女</van-radio>
        </van-radio-group>
      </div>
      <van-calendar v-model="show" :show-confirm="false" @confirm="onConfirm" />
      <van-button>提交</van-button>
    </van-form>
    <van-button @click="onExit">退出</van-button>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Form, Field, Button, Calendar, Cell, CellGroup, RadioGroup, Radio, Checkbox, CheckboxGroup } from 'vant'
import { getUser, setUser } from '@/request/index.js'
import { mapMutations } from 'vuex'

Vue.use(NavBar)
Vue.use(Form)
Vue.use(Field)
Vue.use(Button)
Vue.use(Calendar)
Vue.use(Cell)
Vue.use(CellGroup)
Vue.use(RadioGroup)
Vue.use(Radio)
Vue.use(CheckboxGroup)
Vue.use(Checkbox)

export default {
  data () {
    return {
      nickName: '',
      tel: '',
      email: '',
      result: [],
      sex: '',
      show: false,
      d: '',
      userMsg: {}
    }
  },
  methods: {
    ...mapMutations({
      change_isLogin: 'login/change_isLogin',
      change_token: 'login/change_token',
      change_test: 'login/change_test'
    }),
    onSubmit (v) {
      setUser({
        nickName: v.nickName,
        tel: this.tel,
        email: this.email,
        hobby: JSON.stringify(this.result),
        sex: this.sex,
        birthday: this.d
      }).then(data => {
        console.log(data.data)
      })
    },
    onConfirm (v) {
      // console.log(v)
      this.show = false
      this.d = v.getFullYear() + '/' + (v.getMonth() + 1) + '/' + v.getDate()
    },
    onExit () {
      localStorage.removeItem('isLogin')
      localStorage.removeItem('token')
      // this.$store.commit('login/change_isLogin', '')
      // this.$store.commit('login/change_token', '')
      // this.$store.commit('login/change_test', '')
      this.change_isLogin('')
      this.change_token('')
      this.change_test('')
      this.$router.replace('/home')
    }
  },
  mounted () {
    getUser().then(data => {
      this.userMsg = {
        ...data.data.data
      }
      this.tel = this.userMsg.tel
      this.email = this.userMsg.email
      this.nickName = this.userMsg.nickName
    })
  }
}
</script>

<style lang="scss">
.myBox{
  .van-uploader{
    margin: 0.2rem auto;
    .van-image{
      width: 1rem;
      height: 1rem;
      background: red;
    }
  }
  p{
    text-align: center;
  }
}
</style>
